<!Doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts-X">
    <meta name="author" content="shenyi.914@gmail.com">
    <title>Weibo checkin visualization - Powered by ECharts-X</title>

    <link rel="shortcut icon" href="img/favicon.png">

    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/example.css">
    <link rel="stylesheet" href="../css/codemirror.css">
    <link rel="stylesheet" href="../css/monokai.css">
    <link rel="stylesheet" href="../css/twilight.css">
    <body>
        <header id="header">
            <h1><a href="../index.html">ECharts-X</a></h1>
            <div id="toolbar">
                <button id="open-editor">Code Editor</button>
            </div>
            <ul class="links">
                <li>
                    <a href="../cn/article/getting_started.html" target="_blank">Documentation</a>
                </li>
                <li><a href="../example.html" class="active" target="_blank">Examples</a></li>
                <li><a href="https://github.com/ecomfe/echarts-x/" target="_blank">Github</a></li>
                <li><a href="http://echarts.baidu.com/" target="_blank">ECharts</a></li>
            </ul>
        </header>
        <main id="main">
            <div id="chart"></div>
        </main>
        <div id="editor">
            <textarea></textarea>
            <div id="editor-toolbar">
                <button id="editor-update">Update</button>
                <button id="editor-refresh">Refresh All</button>
                <button id="editor-close">Close</button>
            </div>
        </div>

<script type="text/x-javascript" id="code-source">

myChart.showLoading();

$.ajax({
    url: './data/weibo.json',
    success: function (data) {
        var mpData = data.map(function (serieData, idx) {
            var px = serieData[0] / 1000;
            var py = serieData[1] / 1000;
            var res = [{
                geoCoord: [px, py]
            }];

            for (var i = 2; i < serieData.length; i += 2) {
                var dx = serieData[i] / 1000;
                var dy = serieData[i + 1] / 1000;
                var x = px + dx;
                var y = py + dy;
                res.push({
                    geoCoord: [x, y]
                });

                px = x;
                py = y;
            }

            return res;
        });
        myChart.setOption({
            color : ['rgba(255, 255, 255, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(37, 140, 249, 0.8)'],
            title : {
                text: '微博签到数据',
                subtext: 'Data from ThinkGIS',
                sublink : 'http://www.thinkgis.cn/public/sina/',
                x:'center',
                y:'top',
                textStyle: {
                    color: 'white'
                }
            },
            legend : {
                orient : 'vertical',
                x : 'left',
                data : ['强', '中', '弱'],
                textStyle : {
                    color : '#fff'
                }
            },
            series: [{
                name: '弱',
                type: 'map3d',
                mapType: 'china',

                flat: true,

                flatAngle: 10,

                hoverable: false,
                clickable: false,

                baseLayer: {
                    backgroundColor: 'rgba(0, 0, 0, 0)'
                },

                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: 'white',
                                fontSize: 16
                            }
                        },
                        borderColor: '#777',
                        areaStyle: {
                            color: "#000011"
                        }
                    }
                },

                roam: {
                    minZoom: 4.0,
                    zoom: 5.0,
                    maxZoom: 10.0
                },

                markPoint : {
                    symbolSize : 1,
                    large : true,
                    effect : {
                        show : false
                    },
                    data : mpData[0],
                    distance: 1
                }
            }, {
                name : '中',
                type : 'map3d',
                mapType : 'china',
                markPoint : {
                    symbolSize : 1,
                    large : true,
                    effect : {
                        show : false
                    },
                    data : mpData[1],
                    distance: 1.2
                }
            }, {
                name : '强',
                type : 'map3d',
                mapType : 'china',
                markPoint : {
                    symbolSize : 1,
                    large : true,
                    effect : {
                        show : false
                    },
                    data : mpData[2],
                    distance: 1.4
                }
            }]
        });
        
        myChart.hideLoading();

    }
});
</script>

        <script src="../lib/esl.js"></script>
        <script src="../lib/jquery.min.js"></script>
        <script src="js/bootExample.js"></script>

        <script>
        if (document.location.href.indexOf('local') == -1) {
            var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
            document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb78830c9a5dad062d08b90b2bc0cf5da' type='text/javascript'%3E%3C/script%3E"));   
        }
        </script>

    </body>
</head>
</html>